<!--
  Created by IntelliJ IDEA.
  User: Dai
  Date: 2018/4/4
  Time: 13:41
  To change this template use File | Settings | File Templates.
-->
<!DOCTYPE html>
<html lang="en" layout:decorate="~{default/just_css_and_js}" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <style>
        /*这个页面上的表格的样式*/
        .th-inner {
            height: 20px;
            line-height: 20px;
            font-size: 13px;
            padding: 0 !important;
            /* background-image: none; */
            background-color: white;
            border: 0 !important;
        }

        table {
            border: 0 !important;
        }

        tr {
            border: 0 !important;
        }

        /*实时监控 电池包监控 字太多放不下*/
        #package_monitor label {
            padding-right: 0;
            margin-top: 4px;
        }

        #package_monitor span {
            padding-right: 0;
            margin-top: 4px;
        }

        /*实时监控 模组监控 行转列只能用div做了*/
        #model_monitor .div-left div {
            text-align: center;
            padding: 5px 15px;
        }

        #model_monitor .div-left div:first-child {
            background-color: #c2c2c2;
        }

        #model_monitor .div-left {
            float: left;
        }

        #model_monitor .div-left:first-child div {
            padding: 5px 40px;
        }
    </style>
    <script src="/js/echarts.min.js"></script>
    <!-- datepicker 时间选择器 -->
    <script src="/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        /**
         * 限制开始时间和结束时间不能互相超过
         */
        $(function () {
            $("#start_time_select").datetimepicker({
                bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                startView: 2,
                format: "yyyy-mm-dd",
                minView: "month",
                todayBtn: "linked",
                todayHighlight: true,
                language: "zh-CN",
                showMeridian: true,
                autoclose: true,
                endDate: new Date()
            }).on('changeDate', function (ev) {
                var starttime = $("#start_time_select").val();
                $("#end_time_select").datetimepicker('setStartDate', starttime);
                change_data_type_of_date();
            });
            $("#end_time_select").datetimepicker({
                bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                startView: 2,
                minView: "month",
                format: "yyyy-mm-dd",
                todayBtn: "linked",
                todayHighlight: true,
                language: "zh-CN",
                autoclose: true,
                showMeridian: true,
                endDate: new Date()
            }).on('changeDate', function (ev) {
                var endtime = $("#end_time_select").val();
                $("#start_time_select").datetimepicker('setEndDate', endtime);
                change_data_type_of_date();
            });
        });

        /**
         * 根据自定义的天数决定是否显示小时
         */
        function change_data_type_of_date() {
            var starttime = $("#start_time_select").val();
            var endtime = $("#end_time_select").val();
            $("#data_freque").empty();
            var str = "";
            var cha = GetDateDiff(starttime, endtime);
            console.log(cha);
            if (cha > 8) {
                str = '<button type="button" class="btn btn-choose-red active">日</button>';
            } else {
                str = '<button type="button" class="btn btn-choose-red active">日</button><button type="button" class="btn btn-choose-red">小时</button>';
            }
            $("#data_freque").prepend(str);
            change_data_type($(this));
            $('#data_freque button').click(function (e) {
                change_data_type($(this));
            });
        }

        /**
         * 计算两个日期之间的相距天数
         */
        function GetDateDiff(starttime, endtime) {
            var startTime = new Date(Date.parse(starttime.replace(/-/g, "/"))).getTime();
            var endTime = new Date(Date.parse(endtime.replace(/-/g, "/"))).getTime();
            var dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
            return dates;
        }
    </script>
    <!--页面上的一些js-->
    <script>
        /**
         * 历史查询中的button
         */
        var str_1 =
            '<button type="button" class="btn btn-choose-red active" name="replace_name" value="replace_value">replace_this</button>';
        var str_other =
            '<button type="button" class="btn btn-choose-red" name="replace_name" value="replace_value">replace_this</button>';

        /**
         * 初始化页面
         */
        $(function () {
            /**
             * 历史数据中的图表
             */
            $("#search_history").css("width", $("#default-step-0").width());
            btn_choose_red();
            /**
             * 隐藏时间选择
             */
            $("#time_select").hide();
            /**
             * 按钮点击事件
             */
            button_click();
        });

        /**
         * 点击 测点类别 -> 更改 测点名称 -> 发送请求更改显示图表
         * 1. 更改 测点名称
         *      1)  更改按钮显示
         *      2)  更改测点名称
         *      3)  绑定测点名称单击事件
         * 2. 发送请求更改显示图表
         */
        function change_test_name(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改测点名称
            var text = $(button).text();
            console.log(text);
            $("#history_name").empty();
            var str = "";
            switch (text) {
                case "电压":
                    str = str_1.replace("replace_this", "总电压").replace("replace_value", "总电压").replace("replace_name", "name") + str_other.replace("replace_this", "单体电压极值和极差").replace("replace_value" ,"单体电压极值和极差").replace("replace_name","单体电压极值和极差");
                    break;
                case "电流":
                    str = str_1.replace("replace_this", "电流").replace("replace_value", "电流").replace("replace_name", "name");
                    break;
               /* case "温度":
                    str = str_1.replace("replace_this", "温度").replace("replace_value", "温度").replace("replace_name", "name") + str_other.replace("replace_this", "单体温度极值和极差") + str_other.replace("replace_this", "测点温度");
                    break;*/
            }
            $("#history_name").prepend(str);
            // 3)  绑定测点名称单击事件
            $('button[name="name"]').click(function (e) {
                /**
                 * 点击 测点名称 -> 发送请求更改显示图表
                 * 1. 更改按钮显示
                 * 2. 发送请求更改显示图表
                 */
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
            // 2. 发送请求更改显示图表
            btn_choose_red();
        }

        /**
         * 点击 时间范围 -> 更改 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 1. 更改 显示密度
         *      1)  更改按钮显示
         *      2)  更改显示密度
         *      3)  绑定显示密度单击事件
         * 2. 更改 显示类别 -> 发送请求更改显示图表
         */
        function change_data_freque(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改显示密度
            var text = $(button).text();
            $("#history_freque").empty();
            var str = "";
            switch (text) {
                case "日":
                    str = str_1.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour")
                        + str_other.replace("replace_this", "15分钟").replace("replace_name", "freque").replace("replace_value", "15");
                    $("#time_select").hide();
                    break;
                case "周":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day")
                        + str_other.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour");
                    $("#time_select").hide();
                    break;
                case "月":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day");
                    $("#time_select").hide();
                    break;
                case "年":
                    str = str_1.replace("replace_this", "月").replace("replace_name", "freque").replace("replace_value", "month");
                    $("#time_select").hide();
                    break;
                case "自定义":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day")
                        + str_other.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour");
                    $("#time_select").show();
                    break;
            }
            $("#history_freque").prepend(str);
            // 3)  绑定显示密度单击事件
            $('button[name="freque"]').click(function (e) {
                /**
                 * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
                 */
                change_data_type($(this));
            });
            // 2. 更改 显示类别 -> 发送请求更改显示图表
            change_data_type($(this));
        }

        /**
         * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 1. 更改 显示类别
         *      1)  更改按钮显示
         *      2)  更改显示类别
         *      3)  绑定显示类别单击事件
         * 2. 发送请求更改显示图表
         */
        function change_data_type(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改显示类别
            var text = $(button).text();
            if (text == '15分钟') {
                $("#history_show_type").empty();
                $("#history_show_type").prepend(str_1.replace("replace_this", "瞬态值").replace("replace_name", "show_type").replace("replace_value", "now"));
            } else {
                if ($("#history_show_type").children().size() != 3) {
                    var str = str_1.replace("replace_this", "平均值").replace("replace_name", "show_type").replace("replace_value", "avg")
                        + str_other.replace("replace_this", "最大值").replace("replace_name", "show_type").replace("replace_value", "max")
                        + str_other.replace("replace_this", "最小值").replace("replace_name", "show_type").replace("replace_value", "min");
                    $("#history_show_type").empty();
                    $("#history_show_type").prepend(str);
                }
            }
            // 3)  绑定显示类别单击事件
            $('button[name="show_type"]').click(function (e) {
                /**
                 * 点击 显示类别 -> 发送请求更改显示图表
                 * 1. 更改按钮显示
                 * 2. 发送请求更改显示图表
                 */
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
            // 2. 发送请求更改显示图表
            btn_choose_red();
        }

        /**
         * 发送请求更改显示图表
         * 1. 预设图表
         * 2. 获取请求数据
         * 3. 发送请求并获取返回值设置图表
         */
        function btn_choose_red() {
            // 1. 获取请求数据
            var objType, name, ranges, freque, show_type, start_time = null, end_time = null;
            $("button.active").each(function (i, v) {
                //   console.log(this)
                var title = $(v).attr("name");
                //  alert(title)
                switch (title) {
                    case "objType":
                        objType = $(v).val();
                        break;
                    case "name":
                        name = $(v).val();
                        break;
                    case "ranges":
                        ranges = $(v).val();
                        break;
                    case "freque":
                        freque = $(v).val();
                        break;
                    case "show_type":
                        show_type = $(v).val();
                        break;
                }
            });
            if (ranges == "custom") {
                start_time = $("#start_time").val();
                if (start_time == "") {
                    return false;
                }
                end_time = $("#end_time").val();
                if (end_time == "") {
                    return false;
                }
            }
            // 2. 预设图表
            var history = echarts.init(document.getElementById('search_history'));
            history.setOption({
                title: {                // 标题
                    left: 'center',
                    top: '3%',
                    text: ""
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '3%',
                    bottom: '10%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis'  ,   // 触发类型 axis坐标轴触发
                },
                legend: {               // 图例
                    data: [],
                    x: 'center',        //中间
                    y: 'bottom'         //下方
                },
                toolbox: {              // 工具栏
                    show: true,
                    top: '3%',
                    feature: {
                        dataView: {readOnly: false},        //数据视图
                        magicType: {type: ['line', 'bar']}, //变换类型
                        restore: {},                        //刷新
                        saveAsImage: {}                     //保存图片
                    }
                },
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: false,  //坐标轴两边留白，如果是false就是0点在y轴上
                    data: []
                },
                yAxis: [
                    {
                        type: 'value',
                        boundaryGap: true,
                        // min: 0,
                        max: function (value) {
                            return value.max + 100;
                        }
                    }
                ],
                series: [
                    {
                        name: '单体电压最低(V)',
                        type: 'line',
                        stack: '电压',
                        //color: '#FFFFFF',
                        barMaxWidth: 30,//最大宽度
                        data: []
                    },
                    {
                        name: '单体电压极差(V)',
                        type: 'line',
                        stack: '电压',
                        barMaxWidth: 30,//最大宽度
                        data: []
                    }
                ]
            });
            // 3. 发送请求并获取返回值设置图表
            $.post("/monitor/history_battery_equipment",
                {
                    id: $("#id").val(),
                    objType: objType,
                    name: name,
                    ranges: ranges,
                    freque: freque,
                    show_type: show_type,
                    start_time: start_time,
                    end_time: end_time
                },
                function (map) {
                    // console.log(Object.keys(map.jsonObject).sort());
                    // 1. 如果返回null就走下面的了
                    if (!map.jsonObject) {
                        history.clear();
                        // alert("未配置测点名称对应测点参数！");
                        return false;
                    }
                    if (map.jsonObject != null && map.minjsonObject != null) {
                        history.setOption({
                            title: {
                                text: map.title
                            },
                            xAxis: {
                                data: Object.keys(map.jsonObject).sort()
                            },
                            series: [
                                {
                                    name: '单体电压最低(V)',
                                    data: Object.keys(map.jsonObject).sort().map(function (key) {
                                        return map.jsonObject[key].toFixed(2);
                                    })
                                }, {
                                    name: '单体电压极差(V)',
                                    data: Object.keys(map.minjsonObject).sort().map(function (key) {
                                        return map.minjsonObject[key].toFixed(2);
                                    })
                                }]
                        });

                    }
                    // 2. 如果有值的话就放进去
                    history.setOption({
                        title: {
                            text: map.title
                        },
                        xAxis: {
                            data: Object.keys(map.jsonObject).sort()
                        },
                        series: [
                            {
                                name: name,
                                type: 'line',
                                data: Object.keys(map.jsonObject).sort().map(function (key) {
                                    return map.jsonObject[key].toFixed(2);
                                })
                            }
                        ]
                    });
                }
            );
        }

        /**
         * 历史数据 按钮点击事件
         * 这边还是写个逻辑吧：
         * 点击 测点类别 -> 更改 测点名称 -> 发送请求更改显示图表
         * 点击 测点名称 -> 发送请求更改显示图表
         * 点击 时间范围 -> 更改 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 点击 显示类别 -> 发送请求更改显示图表
         */
        function button_click() {

            /**
             * 点击 测点类别 -> 更改 测点名称 -> 发送请求更改显示图表
             */
            $('button[name="objType"]').click(function (e) {
                change_test_name($(this));
            });
            /**
             * 点击 测点名称 -> 发送请求更改显示图表
             * 1. 更改按钮显示
             * 2. 发送请求更改显示图表
             */
            $('button[name="name"]').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red($(this));
            });
            /**
             * 点击 时间范围 -> 更改 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
             */
            $('button[name="ranges"]').click(function (e) {
                change_data_freque($(this));
            });
            /**
             * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
             */
            $('button[name="freque"]').click(function (e) {
                change_data_type($(this));
            });

            /**
             * 点击 显示类别 -> 发送请求更改显示图表
             * 1. 更改按钮显示
             * 2. 发送请求更改显示图表
             */
            $('button[name="show_type"]').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
        }

        /**
         * 点击 测点类别 -> 更改 测点名称 -> 发送请求更改显示图表
         * 1. 更改 测点名称
         *      1)  更改按钮显示
         *      2)  更改测点名称
         *      3)  绑定测点名称单击事件
         * 2. 发送请求更改显示图表
         */
        function change_test_name(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改测点名称
            var text = $(button).text();
            $("#history_name").empty();
            var str = "";
            switch (text) {
                case "电压":
                    str = str_1.replace("replace_this", "总电压").replace("replace_name", "name").replace("replace_value", "总电压") + str_other.replace("replace_this", "单体电压极值和极差").replace("replace_value" ,"单体电压极值和极差").replace("replace_name","单体电压极值和极差")
                    break;
                case "电流":
                    str = str_1.replace("replace_this", "电流").replace("replace_name", "name").replace("replace_value", "电流");
                    break;
               /* case "温度":
                    str = str_1.replace("replace_this", "温度") + str_other.replace("replace_this", "单体温度极值和极差") + str_other.replace("replace_this", "测点温度");
                    break;*/
            }
            $("#history_name").prepend(str);
            // 3)  绑定测点名称单击事件
            $('button[name="name"]').click(function (e) {
                /**
                 * 点击 测点名称 -> 发送请求更改显示图表
                 * 1. 更改按钮显示
                 * 2. 发送请求更改显示图表
                 */
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
            // 2. 发送请求更改显示图表
            btn_choose_red();
        }

        /**
         * 点击 时间范围 -> 更改 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 1. 更改 显示密度
         *      1)  更改按钮显示
         *      2)  更改显示密度
         *      3)  绑定显示密度单击事件
         * 2. 更改 显示类别 -> 发送请求更改显示图表
         */
        function change_data_freque(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改显示密度
            var text = $(button).text();
            $("#history_freque").empty();
            var str = "";
            switch (text) {
                case "日":
                    str = str_1.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour")
                        + str_other.replace("replace_this", "15分钟").replace("replace_name", "freque").replace("replace_value", "15");
                    $("#time_select").hide();
                    break;
                case "周":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day")
                        + str_other.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour");
                    $("#time_select").hide();
                    break;
                case "月":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day");
                    $("#time_select").hide();
                    break;
                case "年":
                    str = str_1.replace("replace_this", "月").replace("replace_name", "freque").replace("replace_value", "month");
                    $("#time_select").hide();
                    break;
                case "自定义":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day")
                        + str_other.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour");
                    $("#time_select").show();
                    break;
            }
            $("#history_freque").prepend(str);
            // 3)  绑定显示密度单击事件
            $('button[name="freque"]').click(function (e) {
                /**
                 * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
                 */
                change_data_type($(this));
            });
            // 2. 更改 显示类别 -> 发送请求更改显示图表
            change_data_type($(this));
        }

        /**
         * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 1. 更改 显示类别
         *      1)  更改按钮显示
         *      2)  更改显示类别
         *      3)  绑定显示类别单击事件
         * 2. 发送请求更改显示图表
         */
        function change_data_type(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改显示类别
            var text = $(button).text();
            if (text == '15分钟') {
                $("#history_show_type").empty();
                $("#history_show_type").prepend(str_1.replace("replace_this", "瞬态值").replace("replace_name", "show_type").replace("replace_value", "now"));
            } else {
                if ($("#history_show_type").children().size() != 3) {
                    var str = str_1.replace("replace_this", "平均值").replace("replace_name", "show_type").replace("replace_value", "avg")
                        + str_other.replace("replace_this", "最大值").replace("replace_name", "show_type").replace("replace_value", "max")
                        + str_other.replace("replace_this", "最小值").replace("replace_name", "show_type").replace("replace_value", "min");
                    $("#history_show_type").empty();
                    $("#history_show_type").prepend(str);
                }
            }
            // 3)  绑定显示类别单击事件
            $('button[name="show_type"]').click(function (e) {
                /**
                 * 点击 显示类别 -> 发送请求更改显示图表
                 * 1. 更改按钮显示
                 * 2. 发送请求更改显示图表
                 */
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
            // 2. 发送请求更改显示图表
            btn_choose_red();
        }

        /**
         * 显示类别
         */
        $('#data_type button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });
/*******************************************************诊断数据请求***************************************************/
        $(function () {
            /**
             * 电池单体soc数据请求
             */
            $("button[name = 'dtsoc']").on("click", function () {
                //请求后台
                $.ajax({
                    url: "/monitor/dtsoc_data_equipment",
                    data: {
                        id: $("#id").val()
                    },
                    type: "post",
                    success: function (data) {
                        $("#soc")[0].innerText = data.dtsoc;
                        var s = $("#socValue")[0].innerText = data.valueSoc;
                        if (parseInt(s) == 0) {
                            $("i[name = 'socg']").attr("class", "glyphicon glyphicon-minus");
                        } else if (parseInt(s) < 0) {
                            $("i[name = 'socg']").attr("class", "glyphicon glyphicon-arrow-down");
                        }
                    }
                })
            })
            /**
             *  电池单体容量
             */
            $("button[name = 'dtrl']").on("click", function () {
                //请求后台
                $.ajax({
                    url: "/monitor/dtrl_data_equipment",
                    data: {
                        id: $("#id").val()
                    },
                    type: "post",
                    success: function (data) {
                        $("#rl")[0].innerText = data.dtrl;
                        var s = $("#rlValue")[0].innerText = data.valueRl;
                        if (parseInt(s) == 0) {
                            $("i[name = 'rlg']").attr("class", "glyphicon glyphicon-minus");
                        } else if (parseInt(s) < 0) {
                            $("i[name = 'rlg']").attr("class", "glyphicon glyphicon-arrow-down");
                        }
                    }
                })
            })

                /**
                 *  电池单体阻值
                 */
                $("button[name = 'dtzz']").on("click", function () {
                    //请求后台
                    $.ajax({
                        url: "/monitor/dtzz_data_equipment",
                        data: {
                            id: $("#id").val()
                        },
                        type: "post",
                        success: function (data) {
                            $("#zz")[0].innerText = data.dtzz
                            var s = $("#zzValue")[0].innerText = data.valueZz;
                            if (parseInt(s) == 0) {
                                $("i[name = 'zzg']").attr("class", "glyphicon glyphicon-minus");
                            } else if (parseInt(s) < 0) {
                                $("i[name = 'zzg']").attr("class", "glyphicon glyphicon-arrow-down");
                            }
                        }
                    })
                })
        })
    </script>
</head>
<body>
<div layout:fragment="content">
    <div class="main-content-inner">
        <input type="hidden" id="id" th:value="${id}">
        <!--面包屑导航栏-->
        <ul class="breadcrumb">
            <li>
                <a href="#">系统监控</a>
            </li>
            <li class="active" th:text="${equipmentManage.project.name}"></li>
            <li class="active" th:text="${equipmentManage.parent.parent.name}"></li>
            <li class="active" th:text="${equipmentManage.parent.name}"></li>
            <li class="active" th:text="${equipmentManage.name}"></li>
        </ul>
        <!-- 内容显示 -->
        <h1 th:if="${message!=null}" th:text="${message}" style="text-align: center;"></h1>
        <div th:if="${message==null}">
            <!--实时监控-->
            <div>
                <h3 class="col-sm-12" style="border-bottom: 2px solid grey; padding: 5px; margin-top: 0;">实时监控</h3>
                <div class="col-sm-3" th:each="parameter : ${parameterInfoList}">
                    <label class="col-sm-4" th:text="${parameter.name}"></label>
                    <span class="col-sm-3"
                          th:text="${parameter.value==null?'暂无数据':#numbers.formatDecimal({parameter.value}, 1, 2)}">
                            </span>
                    <span class="col-sm-3" th:text="${parameter.unit}"></span>
                </div>
            </div>
            <!--诊断分析-->
            <form>
                <h3 class="col-sm-12" style="border-bottom: 2px solid grey; padding: 5px">诊断分析</h3>
                <!--单体SOC-->
                <fieldset class="col-sm-3" style="margin: 15px; width: 30%">
                    <legend>单体SOC</legend>
                    <div style="font-weight: bolder">
                        <span class="col-sm-3"><span id="soc" th:text="${dtsocData.dtsoc}"></span>%</span>
                        <i name="socg" class="glyphicon glyphicon-arrow-up" style="color: red; float: left"></i>
                        <span class="col-sm-2"><span id="socValue" th:text="${dtsocData.valueSoc}"></span>%</span>
                    </div>
                    <!--刷新按钮-->
                    <button type="button" name="dtsoc"
                            style="background: white; color: black; border: 0;float: right; ">
                        <i class="glyphicon glyphicon-refresh" style="color: black"></i>
                    </button>
                </fieldset>
                <!--单体容量-->
                <fieldset class="col-sm-3" style="margin: 15px; width: 30%">
                    <legend>单体容量</legend>
                    <div style="font-weight: bolder">
                        <span class="col-sm-3"><span id="rl" th:text="${dtsocData.dtrl}"></span>Ah</span>
                        <i name="rlg" class="glyphicon glyphicon-arrow-up" style="color: red; float: left"></i>
                        <span class="col-sm-2"><span id="rlValue" th:text="${dtsocData.valueRl}"></span>Ah</span>
                    </div>
                    <!--刷新按钮-->
                    <button name="dtrl" type="button" style="background: white; color: black; border: 0;float: right; ">
                        <i class="glyphicon glyphicon-refresh" style="color: black"></i>
                    </button>
                </fieldset>
                <!--单体阻值-->
                <fieldset class="col-sm-3" style="margin: 15px; width: 30%">
                    <legend>单体阻值</legend>
                    <div style="font-weight: bolder">
                        <span class="col-sm-3"><span id="zz" th:text="${dtsocData.dtzz}"></span>mΩ</span>
                        <i name="zzg" class="glyphicon glyphicon-arrow-up" style="color: red; float: left"></i>
                        <span class="col-sm-2"><span id="zzValue" th:text="${dtsocData.valueZz}"></span>mΩ</span>
                    </div>
                    <!--刷新按钮-->
                    <button name = "dtzz" type="button" style="background: white; color: black; border: 0;float: right; ">
                        <i class="glyphicon glyphicon-refresh" style="color: black"></i>
                    </button>
                </fieldset>
            </form>
            <!--历史曲线-->
            <div id="default-step-1">
                <h3 class="col-sm-12" style="border-bottom: 2px solid grey; padding: 5px">历史曲线</h3>
                <div class="col-sm-12">
                    <form style="margin-top: 10px" class="col-sm-12">
                        <!--测点类别-->
                        <div>
                            <label style="margin-right: 15px">测点类别</label>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-choose-red active" name="objType" value="1">电压</button>
                                <button type="button" class="btn btn-choose-red" name="objType" value="3">电流</button>
                                <!--<button type="button" class="btn btn-choose-red" name="objType" value="4">温度</button>-->
                            </div>
                        </div>
                        <div>
                            <label style="margin-right: 15px">测点名称</label>
                            <div id="history_name" class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-choose-red active" name="name" value="总电压">总电压
                                </button>
                                <button type="button" class="btn btn-choose-red" name="name" value="单体电压极值和极差">单体电压极值和极差</button>
                            </div>
                        </div>
                        <div>
                            <label style="margin-right: 15px">时间范围</label>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-choose-red active" name="ranges" value="day">日</button>
                                <button type="button" class="btn btn-choose-red" name="ranges" value="week">周</button>
                                <button type="button" class="btn btn-choose-red" name="ranges" value="month">月</button>
                                <button type="button" class="btn btn-choose-red" name="ranges" value="year">年</button>
                                <button type="button" class="btn btn-choose-red" name="ranges" value="custom">自定义</button>
                                <div style="display: inline-block" id="time_select">
                                    <input class="form_date"
                                           style="height: 30px; background-color: white !important; border-radius: 5px !important"
                                           type="text" placeholder="开始时间"
                                           id="start_time_select" data-link-field="start_time" data-link-format="yyyy-mm-dd"
                                           readonly>
                                    <span>至</span>
                                    <input class="form_date"
                                           style="height: 30px; background-color: white !important; border-radius: 5px !important"
                                           type="text" placeholder="结束时间"
                                           id="end_time_select" data-link-field="end_time" data-link-format="yyyy-mm-dd"
                                           readonly>
                                    <input type="hidden" id="start_time" name="start_time">
                                    <input type="hidden" id="end_time" name="end_time">
                                </div>
                            </div>
                        </div>
                        <div>
                            <label style="margin-right: 15px">显示密度</label>
                            <div id="history_freque" class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-choose-red active" name="freque" value="hour">小时
                                </button>
                                <button type="button" class="btn btn-choose-red" name="freque" value="15">15分钟</button>
                            </div>
                        </div>
                        <div>
                            <label style="margin-right: 15px">显示类别</label>
                            <div id="history_show_type" class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-choose-red active" name="show_type" value="avg">平均值
                                </button>
                                <button type="button" class="btn btn-choose-red" name="show_type" value="min">最小值</button>
                                <button type="button" class="btn btn-choose-red" name="show_type" value="max">最大值</button>
                            </div>
                        </div>
                    </form>
                    <!--图-->
                    <div id="search_history" class="col-sm-12"
                         style="height: 400px; margin-top: 10px; border-top: 1px solid #C5D0DC;"></div>
                </div>
            </div>
        </div>
        <hr style="border:0"/>
    </div>
</div>
</body>
</html>